<template>
  <div class="tabs">
    <el-tabs v-model="active" type="card" @tab-remove="close" @tab-click="to">
      <el-tab-pane 
        v-for="t in tabs" 
        :key="t.path" 
        :label="t.title" 
        :name="t.path" 
        closable 
      >
        <template #label>
          <span 
            @contextmenu.prevent="showContextMenu($event, t)"
            class="tab-label"
          >
            {{ t.title }}
          </span>
        </template>
      </el-tab-pane>
    </el-tabs>
    <div class="ops">
      <el-dropdown>
        <span class="el-dropdown-link">{{$t('tabs.refresh')}}</span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="refresh">{{$t('tabs.refresh')}}</el-dropdown-item>
            <el-dropdown-item @click="closeOthers">{{$t('tabs.closeOthers')}}</el-dropdown-item>
            <el-dropdown-item @click="closeAll">{{$t('tabs.closeAll')}}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <!-- 右键菜单 -->
    <div 
      v-show="contextMenuVisible"
      ref="contextMenuRef"
      class="context-menu"
      :style="contextMenuStyle"
      @click.stop
    >
      <div class="context-menu-item" @click="refreshCurrentTab">
        <el-icon><Refresh /></el-icon>
        <span>{{ $t('tabs.refresh') }}</span>
      </div>
      <div class="context-menu-divider"></div>
      <div class="context-menu-item" @click="closeCurrentTab">
        <el-icon><Close /></el-icon>
        <span>{{ $t('tabs.closeCurrent') }}</span>
      </div>
      <div class="context-menu-item" @click="closeOtherTabs">
        <el-icon><Remove /></el-icon>
        <span>{{ $t('tabs.closeOthers') }}</span>
      </div>
      <div class="context-menu-divider"></div>
      <div class="context-menu-item" @click="closeAllTabs">
        <el-icon><Delete /></el-icon>
        <span>{{ $t('tabs.closeAll') }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { Refresh, Close, Remove, Delete } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const { t } = useI18n()

const tabs = ref([])
const active = ref('')
const contextMenuRef = ref()
const contextMenuTab = ref(null)
const contextMenuVisible = ref(false)
const contextMenuStyle = reactive({
  position: 'fixed',
  left: '0px',
  top: '0px',
  zIndex: '9999'
})

watch(() => route.fullPath, (p) => {
  active.value = p
  const metaTitle = route.meta?.title
  const title = metaTitle ? t(metaTitle, metaTitle) : (document.title || p)
  if (!tabs.value.find(t => t.path === p)) {
    tabs.value.push({ path: p, title })
  } else {
    tabs.value = tabs.value.map(t => t.path === p ? { ...t, title } : t)
  }
}, { immediate: true })

function to(tab) { 
  router.push(tab.props.name) 
}

function close(name) {
  const idx = tabs.value.findIndex(t => t.path === name)
  if (idx > -1) {
    tabs.value.splice(idx, 1)
    const next = tabs.value[idx - 1] || tabs.value[0]
    if (next) router.push(next.path)
  }
}

function closeOthers() { 
  tabs.value = tabs.value.filter(t => t.path === active.value) 
}

function closeAll() {
  tabs.value = []
  router.push('/')
}

function refresh() { 
  // 触发内容区域刷新事件
  window.dispatchEvent(new CustomEvent('tab-refresh', { 
    detail: { path: active.value } 
  }))
}

// 右键菜单相关功能
function showContextMenu(event, tab) {
  contextMenuTab.value = tab
  contextMenuStyle.left = event.clientX + 'px'
  contextMenuStyle.top = event.clientY + 'px'
  contextMenuVisible.value = true
  
  // 点击其他地方关闭菜单
  const closeMenu = (e) => {
    if (!contextMenuRef.value?.contains(e.target)) {
      contextMenuVisible.value = false
      document.removeEventListener('click', closeMenu)
    }
  }
  
  nextTick(() => {
    document.addEventListener('click', closeMenu)
  })
}

function refreshCurrentTab() {
  if (contextMenuTab.value) {
    // 触发内容区域刷新事件
    window.dispatchEvent(new CustomEvent('tab-refresh', { 
      detail: { path: contextMenuTab.value.path } 
    }))
  }
  contextMenuVisible.value = false
}

function closeCurrentTab() {
  if (contextMenuTab.value) {
    close(contextMenuTab.value.path)
  }
  contextMenuVisible.value = false
}

function closeOtherTabs() {
  if (contextMenuTab.value) {
    tabs.value = tabs.value.filter(t => t.path === contextMenuTab.value.path)
    router.push(contextMenuTab.value.path)
  }
  contextMenuVisible.value = false
}

function closeAllTabs() {
  closeAll()
  contextMenuVisible.value = false
}
</script>

<style scoped>
.tabs { 
  display: flex; 
  align-items: center; 
  position: relative;
}

.ops { 
  margin-left: auto; 
  padding: 0 8px; 
}

.tab-label {
  cursor: pointer;
  user-select: none;
  padding: 0 4px;
}

/* 标签页悬停效果 */
:deep(.el-tabs__item) {
  cursor: pointer;
  user-select: none;
}

:deep(.el-tabs__item:hover) {
  background-color: #f5f7fa;
}

/* 自定义右键菜单样式 */
.context-menu {
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 4px 0;
  min-width: 140px;
}

.context-menu-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
}

.context-menu-item:hover {
  background-color: #f5f7fa;
  color: #409eff;
}

.context-menu-item .el-icon {
  margin-right: 8px;
  font-size: 16px;
}

.context-menu-divider {
  height: 1px;
  background-color: #e4e7ed;
  margin: 4px 0;
}
</style>


